<template>
    <view class="show-modal-mask"  v-if="isShowModal">
        <block v-if="type=='custom'">
            <slot></slot>
        </block>
        <block v-if="type=='default'">
            <view class="preview-greetings-wrapper" :style="{'width': width, 'height': height}">
                <view class="greetings-wrapper">
                    <image :src="content.src" class="greetings-img"></image>
                    <view class="greetings-txt-wrapper">
                        <image :src="content.avatarSrc" class="avatar-img"></image>
                        <view class="greetings">
                            <text>{{content.greetings}}</text>
                            <text class="one one-arrow-left trig-right"></text>
                        </view>
                    </view>
                </view>
                <view @tap="closeHandle" class="close-btn-wrapper">
                    <text class="one one-close close-btn"></text>
                </view>
            </view>
        </block>
        <block v-if="type=='thumVip'">
            <view class="preview-thumVip-wrapper" :style="{'width': width, 'height': height}">
                <view class="thumVip-wrapper">
                    <image @tap="closeHandle" src="../../static/imgs/vip-img.svg"/>
                </view>
<!--                <view @tap="closeHandle" class="close-btn-wrapper">-->
<!--                    <text class="one one-close close-btn"></text>-->
<!--                </view>-->
            </view>
        </block>
        <block v-if="type=='thumVip2'">
            <view class="preview-thumVip2-wrapper" :style="{'width': width, 'height': height}">
                <text class="icon-vip vip-btn"></text>
                <view class="thum-vip-two">
                    <view class="title">尊贵的拇指会员</view>
                    <view class="content">
                        {{tipsContent}}
                    </view>
                    <view class="btn-wrapper">
                        <text class="cancel" @tap="closeHandle">取消</text>
                        <text class="chose-card" @tap="confirmHandle">继续购卡</text>
                    </view>
                </view>
            </view>
        </block>
        <block v-if="type === 'tips'">
            <view class="preview-confirm-tips" :style="{'width': width, 'height': height}">
                <view class="content">
                    {{tipsContent}}
                </view>
                <view class="btn-wrapper">
                    <text class="cancel" @tap="closeHandle">取消</text>
                    <text class="chose-card" @tap="confirmHandle">确定</text>
                </view>
            </view>
        </block>
    </view>
</template>

<script>
    export default {
        name: "showModal",
        props: {
            type: {
                type: String,
                default: 'default'
            },
            value: {
                type: Boolean,
                default: false
            },
            width: {
                type: [String],
                default: '630rpx'
            },
            height: {
                type: [String],
                default: '860rpx'
            },
            content: {
                type: Object,
                default: {
                    src: 'https://devres.alphalawyer.cn/pusher/084018924da349ee84308cfe629c70ce.jpeg',
                    avatarSrc: 'https://devres.alphalawyer.cn/pusher/084018924da349ee84308cfe629c70ce.jpeg',
                    greetings: '问候语'
                }
            },
            tipsContent: {
                type: String,
                default: '确认删除'
            },
        },
        computed: {
            isShowModal : {
                get () {
                    return this.value
                },
                set (value) {
                    if (this.value !== value) {
                        this.$emit('input', value)
                    }
                }
            }
        },
        methods: {
            closeHandle () {
                this.isShowModal = false
                this.$emit('cancel')
            },
            confirmHandle(){
                this.isShowModal = false;
                this.$emit('confirm');
            }
        }
    }
</script>

<style scoped lang="scss">
.show-modal-mask{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    height: 100%;
    background:rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    .center{
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .preview-greetings-wrapper{
        position: relative;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        height: 600rpx;
        .greetings-wrapper{
            background-color: #fff;
            width: 100%;
            border-radius: 12rpx;
        }
        .greetings-img{
            background-color: #fff;
            width: 100%;
            height: 354rpx;
            border: 0;
            font-size: 0;
            border-radius: 12rpx 12rpx 0 0;
        }
        .greetings-txt-wrapper{
            width: 630rpx;
            height: 286rpx;
            margin: 0;
            padding: 48rpx;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            margin-top: 12rpx;
            .avatar-img{
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
                flex: 0 0 80rpx;
                margin-top: 12rpx;
            }
            .greetings{
                width: 422rpx;
                height: 156rpx;
                background: linear-gradient(to bottom, #fcfcfd, #f7f8f9);
                border-radius: 12rpx;
                padding: 12rpx 20rpx;
                box-sizing: border-box;
                position: relative;
                font-size: 28rpx;
                line-height: 1.57;
                color: #212121;
                border: solid 1rpx #cccccc;
                .trig-right{
                    position: absolute;
                    top: 60rpx;
                    left: -24rpx;
                    font-size: 40rpx;
                    width: 40rpx;
                    height: 40rpx;
                    display: inline-block;
                    color: #cccccc;
                }
            }
        }
    }
    .preview-thumVip2-wrapper{
       background: #fff;
        position: relative;
        border-radius:8px;
        .vip-btn{
            position: absolute;
            font-size: 80rpx;
            left: 50%;
            transform: translate(-50%, -50%);
            top:0;
            color: #fff;
            width: 180rpx;
            height: 180rpx;
            border-radius: 50%;
            background: #F2D9C1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .thum-vip-two{
            padding: 20rpx;
            box-sizing: border-box;
            .title{
                font-size:36rpx;
                font-weight: 600;
                color:rgba(51,51,51,1);
                margin-top: 90rpx;
                text-align: center;
            }
            .content{
                margin: 60rpx 30rpx;
                text-align: center;
                font-size: 28rpx;
                color:rgba(51,51,51,1);
            }
            .btn-wrapper{
                display: flex;
                justify-content: space-between;
                text{
                    font-size:30rpx;
                    font-weight:400;
                    color:rgba(43,168,252,1);
                    width: 250rpx;
                    height: 88rpx;
                    line-height: 88rpx;
                    text-align: center;
                }
                .chose-card{
                    background:rgba(43,168,252,1);
                    color: #fff;
                }
                .cancel{
                    color: #2BA8FC;
                    border:1px solid rgba(43,168,252,1);
                }
            }
        }

    }
    .preview-confirm-tips{
        background: #fff;
        position: relative;
        border-radius:8px;
        width: 550rpx;
        height: 260rpx;
        .content{
           padding: 50rpx 60rpx;
           font-size: 30rpx;
            text-align: center;
        }
        .btn-wrapper{
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-between;
            text {
               font-size: 30rpx;
                line-height: 100rpx;
                height: 100rpx;
                text-align: center;
                font-weight: 500;
                flex: 0 0 50%;
                border-top: 1rpx solid #E5E5E5;
            }
            .chose-card{
                color: #2BA8FC;
                border-left: 1rpx solid #E5E5E5;
            }
        }
    }
    .thumVip-wrapper{
        position: relative;
    }
    .close-btn-wrapper{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80rpx;
        height: 80rpx;
        margin-top: 60rpx;
        text-align: center;
        line-height: 80rpx;
        border: solid 2rpx #ffffff;
        border-radius: 50%;
    }
    .close-btn{
        font-size: 44rpx;
        color: #fff;
    }
}
</style>
